<template>
  <div id="map">
    <div class="box">
      <div class="auto-map">
        <p>
          所在城市:
          <span v-text="location"></span>
        </p>
      </div>

      <ul class="topnews">
        <li>
          <em>您好,</em>
          <span>18838979821</span>
          <strong>退出</strong>
        </li>
        <li>我的订单</li>
        <li>我的消息</li>
        <li>我是商家</li>
        <li>
          <i class="icon iconfont icon-dianhua fontset"></i>
          <strong>400-800-8820</strong>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import AMap from "AMap";
export default {
  data() {
    return {
      location: "北京"
    };
  },
  mounted(){
    this.getLocation()
  },
  methods: {
    getLocation() {
      const _this = this;

      AMap.plugin("AMap.CitySearch", function() {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function(status, result) {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            
            _this.location = result.city;
            localStorage.city=result.city

          }
        });
      });
    }
  }
};
</script>
<style scoped>
#map {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 30px;
  background: #eeeeee;
}
.box {
  width: 80%;
  line-height: 30px;
  margin: auto;
  overflow: hidden;
}
.auto-map {
  float: left;
}

.topnews {
  width: 50%;
  float: right;
  list-style: none;
  margin: 0px;
  padding: 0px;
  margin-top: 5px;
  color: #999;
}
.topnews li {
  float: left;
  width: 13%;
  height: 20px;
  line-height: 20px;
  border-right: 1px solid #999;
}
.topnews li span {
  color: #99bb94;
}
.topnews li:nth-child(1) {
  width: 32%;
}
.topnews li:nth-child(5) {
  width: 23%;
  border: none;
}
.fontset {
  color: #4b943d;
  margin-right: 5px;
}
</style>